<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .list {
        width: 20px;
        text-align: center;
    }
</style>

<body>
    <div id="app">
        <button @click="add">新增</button>
        <input type="text" v-model="keyword" placeholder="请输入关键字">
        <!-- 数据table -->
        <table v-show="data_table">
            <tr v-for="(item,index) in list">
                <td >
                    <input class="list" type="text" v-model="item.id" disabled>
                    
                </td>
                <td>
                    <input  type="text" v-model="item.tite" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input  type="text" v-model="item.imports" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input  type="text" v-model="item.text" :disabled="disabledarr[index]">
                </td>
                <td>
                    <button @click="endit(index,item.id)">编辑</button>
                    <button @click="del(item.id)">删除</button>
                    <button @click="cofim_endit(index,item.id)" v-show="display">保存编辑</button>
                </td>
            </tr>
        </table>
        <!-- 新增table -->
        <table v-show="add_table">
            <tr>
                <td>
                    <input type="text" v-model="addobj.tite">
                </td>
                <td>
                    <input type="text" v-model="addobj.imports">
                </td>
                <td>
                    <input type="text" v-model="addobj.text">
                </td>
                <td>
                    <button @click="save()">保存</button>
                    <button @click="cancel()">取消</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="./vue.js"></script>
    <script src="./jquery-3.6.0.min.js"></script>
    <script>
        let baseUrl = 'http://localhost:8000/blog'


        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                list: [],
                keyword: '',
                disabledarr: [],
                data_table: true,
                display: false,
                add_table: false,
                addobj: {}
            },
            watch: {
                keyword() {
                    this.ajax_home('get', {
                        "obj": this.keyword
                    })
                }
            },
            methods: {
                ajax_home(method, obj) {
                    $.ajax({
                        url: baseUrl,
                        method: method,
                        data: obj,
                        success: (res) => {
                            this.list = res
                            this.disabledarr = []
                            for (let i = 0; i < this.list.length; i++) {
                                ;
                                this.disabledarr.push(true)
                            }
                            console.log(this.disabledarr);
                            // this.display = true
                        }
                    });
                },
                query() { /*因为watch,我就是一个摆设*/ },
                add() {
                    this.add_table = true
                },
                cancel() {
                    this.add_table = false
                },
                save() {
                    this.ajax_home('post', this.addobj)
                    this.addobj = {}
                    this.add_table = false
                },
                endit(index, id) {
                    if (this.display == false) {
                        this.disabledarr = this.disabledarr.join(',').replaceAll(true, false).split(',')
                        this.disabledarr.splice(index, 1, false)
                        this.display = true
                    }
                },
                cofim_endit(index, id) {
                    this.ajax_home('put', (this.list)[index])
                    // this.disabledarr.splice(index, 1, true)
                    this.display = false
                },
                del(id) {
                    this.display = false
                    this.ajax_home('delete', {
                        "obj": id
                    })
                }
            },
            created: function () {
                this.ajax_home('get', {
                    "obj": ''
                })
            }
        })
    </script>
</body>

</html>